<template>
    <div>
        <el-form class="form-box" label-position="left">
            <el-row :gutter="20">
                <el-col :xs="24" :sm="24" :lg="24" class="col-box">
                    <span class="col-span">项目需求：</span>
                    <el-select v-model="addProject" style="width:70%" @change="checkHours" filterable placeholder="请选择" @clear="clearFn" clearable  :popper-append-to-body="false">
                            <el-option-group
                            v-for="group in project_list"
                            :key="group.label"
                            :label="group.label">
                            <el-option
                                v-for="(item,ind) in group.options"
                                :key="ind"
                                :label="item.project_workflow.project_name + '（' + (item.technical_field ? item.technical_field.name : '') + '）'"
                                :value="item.id">
                            </el-option>
                        </el-option-group>
                    </el-select>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :xs="24" :sm="24" :lg="24" class="col-box">
                    <span class="col-span">分配工时：</span>
                    <el-input style="width:70%" v-model="addSpend" autocomplete="off"    
                    oninput="value=value.replace(/^0[0-9]|^[2-9]|^1[0-9]|^1\.|[^\d.]/g,'').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')"
                    placeholder="输入小于等于1的非负数且为两位小数"></el-input><span style="line-height:36px;margin-left:5px">人月</span>
                </el-col>
                <div style="margin-left:110px;font-size: 12px;color:red" v-if="showText">
                    <span>当前需求可分配数：</span>
                    <div v-for="(val,ind) in monthRange" :key="val+ind" style="margin-left:10px">
                        <span v-if="mess">
                            {{val + "月：" + mess[val].toFixed(1) + "人天"}}
                        </span>
                    </div>
                </div>
            </el-row>
        </el-form>
        <div class="form-btn">
            <el-button type="warning" :loading="loadingBtn" @click="cancelManPower">取消</el-button>
            <el-button type="primary" :loading="loadingBtn" @click="submitManPower">保存</el-button>
        </div>
    </div>
</template>

<script>
import { getHeaderName } from '@/app.config'
export default {
    name: 'Talent',
    props: {
        employee_id: '',
        // weekCol: Array,
        loadingBtn: Boolean,
        monthCol:Array
    },
    data() {
        return {
            monthRange:[],
            mess:{},
            showText :false,
            isShowMonth:true,
            addProject: '',
            addSpend: '',
            editProject: '',
            editSpend: '',
            memStatus: '',
            itemData: {},
            project_list: [
                {
                label: '已分配项目',
                options: []
                }, {
                label: '未分配项目',
                options: []
                }
            ],
        }
    },
    mounted() {
        this.initPro()
    },
    methods: {
        clearFn(){
            this.showText = false
        },
        checkHours(e){
            console.log(777,e)
            this.showText = true
            this.$axios({                      
                url: `${process.env.VUE_APP_SOURSE_MANAGE_HOST}/api/v1/car_project/get_month_site_power`,
                method: "get",
                params: {
                    site_power_id: e,
                    date_range: this.monthCol.join()
                },
                headers: getHeaderName()
            }).then(res => {
                console.log("res",res)
                if(res.data.code === 200){
                    this.mess = res.data.data.data
                    this.monthRange = res.data.data.month_range
                }
                
            })
        },
        initPro() {
            this.loading = true
            this.$axios({                      
                url: `${process.env.VUE_APP_SOURSE_MANAGE_HOST}/api/v1/car_employee/${this.employee_id}/project/demand`,
                method: "get",
                params: {
                    date_range: this.monthCol.join()
                },
                headers: getHeaderName()
            }).then(res => {
                this.project_list[0].options = res.data.data.distribution
                this.project_list[1].options = res.data.data.unallocated
            })
        },
        cancelManPower(){
            this.isShowMonth = false
            this.$emit('isShowMonth',this.isShowMonth)
        },
        submitManPower() {
            if(!this.addProject) {
                this.$message.error('请选择项目')
                return false
            }
            if(!this.addSpend) {
                this.$message.error('请填写分配人月')
                return false
            }
            let data = {
                    'employee_id': this.employee_id, 
                    'project_id': this.addProject, 
                    'spend': this.addSpend,
                    'month_display':this.monthCol.join()
                }
            this.$emit('submitManPowerMon',data)
        },
    },
}
</script>
<style lang="scss" scoped>
.col-box {
  display: flex;
  margin-bottom: 10px;
  .col-span {
    min-width: 100px;
    line-height: 36px;
  }
}
.form-box {
    padding: 0 20px 20px 20px;
}
.form-title {
    font-size: 18px;
    margin: 10px 0 30px 0;
}
.form-item {
    display: flex;
    min-height: 50px;
}
.form-btn {
    text-align: right;
}
</style>


